/*  This style sheet is totally inspired by Google Chrome settings page design and I did 
	reuse a lot of their style code, *without permission* which I assume is fine given 
	that Google claims not to be evil and this is an ad-free non-profit website */

html, body
{
	height:100%;
}

#settings-container {
-webkit-box-align: stretch;
-webkit-padding-start: 216px;
margin: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}

#settings-title {
-webkit-padding-end: 24px;
-webkit-user-select: none;
color: #53637D;
cursor: pointer;
font-size: 200%;
font-weight: normal;
margin: 0;
padding-bottom: 14px;
padding-top: 13px;
text-align: end;
text-shadow: white 0 1px 2px;
}

#navigation-pane {
-webkit-border-end: 1px solid #C6C9CE;
background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #EAEEF3), -webkit-linear-gradient(left, #EAEEF3, #EAEEF3 97%, #D3D7DB);
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
width: 216px;
z-index: 2;
}

.navigation-pane-item {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #426DC9;
cursor: pointer;
display: block;
font-size: 105%;
outline: none;
padding: 7px 0;
text-align: end;
text-shadow: white 0 1px 1px;
-webkit-padding-end: 24px;
}

.navigation-pane-item-selected {
-webkit-box-shadow: 0px 1px 0px #F7F7F7;
background: -webkit-linear-gradient(left, #BBCEE9, #BBCEE9 97%, #AABEDC);
border-bottom: 1px solid #8FAAD9;
border-top: 1px solid #8FAAD9;
color: black;
text-shadow: #BBCEE9 0 1px 1px;
}

#settings-pane-block {
box-sizing: border-box;
max-width: 888px;
min-width: 600px;
padding: 0 24px;
}

#settings-pane {
min-height: 100%;
position: relative;
}

#container {
    display: table;
    }

#row  {
    display: table-row;
    }

#navigation-pane, #settings-pane {
    display: table-cell;
    }
   
.page h1 {
  -webkit-padding-end: 24px;
  -webkit-user-select: none;
  border-bottom: 1px solid #eeeeee;
  color: #53637d;
  font-size: 200%;
  font-weight: normal;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 13px;
  text-shadow: white 0 1px 2px;
}

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

.hidden, [hidden] {
  display: none !important;
}

/*required to remove default padding and margins, absence of which shows scroll bars even at 100% height settings*/
* {margin:0; padding:0;} 